<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>大数据加载</title>
<script type="text/javascript" src="../../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../js/template.min.js"></script>
<script type="text/javascript" src="../../js/extgrid/jquery.extGrid.js"></script>
<script type="text/javascript" src="../../js/extgrid/jquery.extGrid.responsive.js"></script>

<link rel="stylesheet" type="text/css" href="../../js/extgrid/themes/default/skin.css">
</head>
<body>
<h4>大数据加载</h4>
<div style="width:100%; height:400px;" id="extgrid">
	
</div>
<script type="text/javascript">
var getData = function(){
	var len = 50000;
	var data = [];
	for( var i=0;i<len;i++ ) {
		data.push({
			id : i+1,
			username : '张三'+i,
			alias : '小明',
			gender : '男',
			age : i%90,
			birthday : '2012-08-09',
			tel : 13124587451,
			country : '地球',
			address : '地球村',
			qq : 123456,
			hobby : '随便'
		});
	}
	return data;
}
var columns = [
					{field:'username',title:'用户名',width:'100'},
					{field:'alias',title:'别名',width:'100'},
					{field:'gender',title:'性别',width:'50'},
					{field:'age',title:'年龄',width:'50'},
					{field:'birthday',title:'生日',width:'90'},
					{field:'tel',title:'联系电话',width:'90',align:'center'},
					{field:'country',title:'国家',width:'90',align:'center'},
					{field:'address',title:'家住地址',width:'180',align:'center'},
					{field:'qq',title:'QQ',width:'90',align:'center'},
					{field:'hobby',title:'爱好',width:'90',align:'center'}
				];
var datas = getData();			
$(function(){
	$("#extgrid").extgrid({
		columns:columns,
		rowNumbersWidth:40,
		checkBox : true,
		pageSize : 999999,
		minWidth : 450,
		lazyLoadRow : true,
		data : datas,
		forceFit : true,
		onFinish : function(){
			var self = this;
			$(window).resize(function(e){
				self.resize();					  
			});	
		}
	});
});
</script>
</body>
</html>
